<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<% String path=request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Edit Employee</title>
<link href="<s:url value="/style.css"/>" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function addDoctorToTable()
{
		var tbl = document.getElementById('workForTable');
		var lastRow = tbl.rows.length-1;
		// if there's no header row in the table, then iteration = lastRow + 1
		var row = tbl.insertRow(lastRow);
		// left cell
		var cellLeft = row.insertCell(0);
		/* var textNode = document.createTextNode(iteration); */

		// select cell
		/* var cellRightSel = row.insertCell(2); */
		var sel = document.createElement('select');
		sel.name = 'selectedWorkForDoctors';
		<s:iterator value="retrievedDoctorList">
		sel.options.add(new Option("<s:property value='name'/>",
				"<s:property value='id'/>"));
		</s:iterator>
		/* cellRightSel.appendChild(sel); */
		cellLeft.appendChild(sel);
		// right cell
		var cellRight = row.insertCell(1);
		var link = document.createElement("a");
		link.setAttribute("href", "#");
		link.title = "delete";
		link.innerHTML = link.title;
		link.onclick = function(){removeDoctorFromTable(row);};
		
		cellRight.appendChild(link);
		
	}
function removeDoctorFromTable(row){
	var tbl = document.getElementById('workForTable');
	tbl.deleteRow(row.rowIndex);
}
</script>
</head>
<body>
	<jsp:include page="/navigation/navigation.jsp"/>

	<div id="mainBox">
		<center>
			<s:if test='empType=="DOCTOR"'>
				<h3>Edit Doctor</h3>
			</s:if>
			<s:if test='empType=="STAFF"'>
				<h3>Edit Staff</h3>
			</s:if>
			<s:if test='empType=="LEGAL"'>
				<h3>Edit Legal</h3>
			</s:if>
			<s:if test='empType=="FINANCE"'>
				<h3>Edit Finance</h3>
			</s:if>
		</center>
		
		<center>
				<s:form name="updateEmployeeForm" action="updateEmployee" method="post">
					<table width="300px">
						<tr>
							<td><img id = "userImage" src = "<s:url value="/resources/user.png" />" width=100px height=120px alt="404 Not Found"></td>
						</tr>
						<tr>
							<td>Id:</td>
							<td><s:property value="retrievedEmployee.id"/></td>
						</tr>
						<tr>
							<td>Username:</td>
							<td><s:property value="retrievedEmployee.username"/></td>
						</tr>
					
						<s:password name="retrievedEmployee.password" label="Password"/>
						<s:textfield name="retrievedEmployee.name" label="Name"/>
						<s:textfield name="retrievedEmployee.department" label="Department"/>
						<s:textfield name="retrievedEmployee.title" label="Title"/>
						<s:hidden name="retrievedEmployee.id" value="%{retrievedEmployee.id}"/>
						<s:hidden name="empType" value="%{empType}"/>
						
						<s:if test='empType=="STAFF"'>
							<tr>
								<td valign="top">Work for Doctors:</td>
								<td>
									<table id="workForTable">
										<s:iterator value="selectedWorkForDoctors" var="selectedId">
											<tr><td>
												<select name="selectedWorkForDoctors" >
													<s:iterator value="retrievedDoctorList" status="doc">
											    		<option value="<s:property value="id"/>" 
											    		<s:if test="id==#selectedId">selected = "selected"</s:if>
											    		><s:property value="name"/></option>
													</s:iterator>
												</select>
											</td>
											<td><a href="#" onClick="removeDoctorFromTable(this.parentNode.parentNode)"> delete</a></td></tr>
										</s:iterator>
										<tr><td><a href="#" onClick="addDoctorToTable()"> Add Doctor</a></td></tr>
									</table>					
								</td>
							</tr>
						</s:if>
						
						<s:submit value="Save" method="updateEmployee"/>
					</table>
				</s:form>
				<div id="actionResult"><s:property value="#session.actionResult"/></div>
		</center>
		
		
	</div>
	
	
</body>
</html>